window.onload = function () {
    var root_names = ['南风老师', '夏夜老师', '教务处', '六星教育-诗涵老师', '六星教育-茉茉老师', '清欢老师', '思思小仙女', '清妍老师', '云归老师']
    var jiangshi_lists = []
    // 仅录播计数
    let lubo_student_objs = {}
    // 录播累计观看时长
    let date_sum = {}

    // 筛选为未学习学员
    function weixuexi_student(i, obj) {
        return new Promise(resolve => {
            let file = obj.files[i];
            let reader = new FileReader();
            reader.onload = function (e) {
                let data = e.target.result;
                let xlsxData = XLSX.read(data, {
                        type: 'binary'
                });
            let datas = xlsxData.Sheets[xlsxData.SheetNames[0]]
            for (let cl in datas) {
                let value = datas[cl].w;
                if (value === '无') {
                    const regex = /\d+/g
                    const result = cl.match(regex)[0]
                    const student_name = datas[`F${result}`].w
                    jiangshi_lists.push(student_name)
                }
            }
            // 仅看录播
            for (let cl in datas) {
                // 列名
                let cl_head = cl.replace(/[0-9]/g, '')
                if (cl.match(/\d+/g)){
                    // 行数
                    var line = cl.match(/\d+/g)[0]
                }else{
                    continue
                }
                if (cl_head === 'I' && datas[cl].w === '未参与' && datas[`J${line}`].w !== '未参与') {
                    // 报错F列为空时，取E列数据
                    try {
                        var name = datas[`F${line}`].w
                    }
                    catch (err) {
                        var name = datas[`E${line}`].w
                    }
                    if (name in lubo_student_objs) {
                        lubo_student_objs[name]++
                    } else {
                        lubo_student_objs[name] = 1
                    }

                    var timeStr = datas[`J${line}`].w;
                    var timeArr = timeStr.split("时");
                    var hour = parseInt(timeArr[0]);
                    var min = parseInt(timeArr[1].split("分")[0]);
                    var sec = parseInt(timeArr[1].split("分")[1].split("秒")[0]);

                    var timeObj = new Date();
                    timeObj.setUTCHours(hour);
                    timeObj.setUTCMinutes(min);
                    timeObj.setUTCSeconds(sec);
                    timeObj.setUTCFullYear(1970, 0, 1);
                    
                    // 秒值
                    let time = Math.floor(timeObj.getTime() / 1000)

                    if (name in date_sum) {
                        // 累加秒值
                        date_sum[name] += time
                    } else {
                        date_sum[name] = time
                    }
                }
            }
                
            resolve()
        };
        reader.readAsBinaryString(file);
        })
        }

    // 上传文件事件
    document.querySelector('input').addEventListener('change', function (obj) {
        // 将初始界面隐藏
        document.querySelector('.chushi').style.display = 'none'
        document.querySelector('.content-weixuexi').style.display = 'block'

        var obj = obj.target
        var promises = [];
        for (let i = 0; i < obj.files.length; i++) {
            promises.push(weixuexi_student(i, obj)); // 筛选未学习学员
        }
        // 等待所有异步对象返回后执行
        Promise.all(promises).then(() => {
            var new_jiangshi_lists = jiangshi_lists.filter(item => !root_names.includes(item))
            // 统计未学习学员次数
            let sum_lists = {}
            new_jiangshi_lists.forEach(name => {
                if (sum_lists[name]) {
                    sum_lists[name]++;
                } else {
                    sum_lists[name] = 1
                }
            });
            // 未学习列表添加数据
            function update(objs, element_div) {
                for (const key in objs) {
                    let li = document.createElement('li')
                    let btn = document.createElement('button')
                    let span_name = document.createElement('span')  // 姓名
                    let span_conut = document.createElement('span')  // 次数
                    span_name.innerHTML = `${key}`  // 姓名
                    span_conut.innerHTML = `${objs[key]}`  // 次数
                    span_conut.classList.add('span_conut')  // 为数字添加类
                    span_name.classList.add('span_name')  // 为名字添加类
                    btn.innerHTML = '删除'  // 删除
                    li.appendChild(btn)
                    li.appendChild(span_name)
                    li.appendChild(span_conut)
                    element_div.appendChild(li)
                }
            }
            // 仅录播列表添加数据
            function uptime(objs, element_div) {
                for (const key in objs) {
                    let li = document.createElement('li')
                    let btn = document.createElement('button')
                    let span_name = document.createElement('span')  // 姓名
                    let span_conut = document.createElement('span')  // 次数
                    let span_data = document.createElement('span')  // 时间
                    span_name.classList.add('span_name')  // 为名字添加类
                    span_conut.classList.add('span_conut')  // 为次数添加类

                    span_name.innerHTML = `${key}`  // 姓名
                    span_conut.innerHTML = `${objs[key]}`  // 次数
                    btn.innerHTML = '删除'  // 删除

                    // 计算平均时长  仅看录播总时长 / 仅看录播次数
                    let average_date = Math.floor(date_sum[key] / objs[key])

                    // 时
                    let hours = Math.floor(average_date / 3600)
                    // 分
                    let minutes = Math.floor((average_date - hours * 3600) / 60)
                    // 秒
                    let seconds = average_date - hours * 3600 - minutes * 60
                    // 格式化
                    span_data.innerHTML = `${hours >= 10 ? hours : '0' + hours}时 ${minutes >= 10 ? minutes : '0' + minutes}分 ${seconds >= 10 ? seconds : '0' + seconds}秒`


                    li.appendChild(btn)
                    li.appendChild(span_name)
                    li.appendChild(span_conut)
                    li.appendChild(span_data)
                    element_div.appendChild(li)
                }
            }
            

            // 更新页面
            // 未学习内容
            let element_content = document.querySelector(".content-weixuexi .content")
            // 看录播内容
            let element_content_lubo = document.querySelector(".content-jinlubo .content")
            update(sum_lists, element_content) // 更新未学习页面
            uptime(lubo_student_objs, element_content_lubo)  // 更新仅录播页面

            // 统计未学习总数
            document.querySelector('.weixuexi').innerHTML = `未学习(${Object.keys(sum_lists).length})`
            // 统计仅录播总数
            document.querySelector('.lubo').innerHTML = `仅录播(${Object.keys(lubo_student_objs).length})`
            
            // li标签中所有的删除按钮
            let btn = document.querySelectorAll('.content > li > button')
            btn.forEach(element => {
                element.addEventListener('click', function () {
                    let parent = this.parentNode
                    parent.parentNode.removeChild(parent)
                })
            });

            var title_click = document.querySelectorAll('.title > li')
            var content_weixuexi = document.querySelector('.content-weixuexi')
            var content_jinlubo = document.querySelector('.content-jinlubo')
            title_click.forEach(element => {
                element.addEventListener('click', function () {
                    // 删除所有的click选中样式
                    title_click.forEach(value => {
                        value.classList.remove('click')
                    });
                    this.classList.add('click')
                    if (this.classList.contains('weixuexi')) {
                        content_weixuexi.style.display =  'block'
                        content_jinlubo.style.display =  'none'
                    } else {
                        content_weixuexi.style.display = 'none'
                        content_jinlubo.style.display = 'block'
                    }
                })
            });
            // 未学习中的排序按钮
            let weixuexi_sort = document.querySelector('.content-weixuexi .sort > div')
            // 未学习所有li
            const weixuexi_items = document.querySelectorAll(".content-weixuexi .content li");
            // 未学习ul
            const weixuexi_content = document.querySelector(".content-weixuexi .content");
            // 看录播的排序按钮
            let jinlubo_sort = document.querySelector('.content-jinlubo .sort > div')
            // 看录播所有li
            const jinlubo_items = document.querySelectorAll(".content-jinlubo .content li");
            // 看录播ul
            const jinlubo_content = document.querySelector(".content-jinlubo .content");

            // 排序状态，初始为降序
            var sort_state = true

            function sortFunc(sort, items, content) {
                // 排序
                sort.addEventListener('click', function () {
                    // 将li元素转化为数组
                    var arr = Array.prototype.slice.call(items);
                    // 修改排序方式
                    sort_state = !sort_state;
                    // 根据count属性进行排序
                    arr.sort(function (a, b) {
                        var aCount = parseInt(a.querySelector(".span_conut").textContent);
                        var bCount = parseInt(b.querySelector(".span_conut").textContent);
                        if (sort_state) {
                            return aCount - bCount;
                        } else {
                            return bCount - aCount;
                        }
                    });

                    // 按排序结果更新li元素的顺序
                    for (var i = 0; i < arr.length; i++) {
                        content.appendChild(arr[i]);
                    }

                })
            }
            // 未学习排序
            sortFunc(weixuexi_sort, weixuexi_items, weixuexi_content)
            // 仅录播排序
            sortFunc(jinlubo_sort, jinlubo_items, jinlubo_content)



            // 搜索功能

            // 所有未学习li
            let weixuexi_lis = Array.prototype.slice.call(weixuexi_items);
            // 所有仅录播li
            let jinlubo_lis = Array.prototype.slice.call(jinlubo_items);
            // 搜索框
            let search = document.querySelector('#search')
            // 搜索按钮
            let search_btn = document.querySelector('.search')

            // 搜索处理函数
            function filter_function() {
                var input_value = search.value
                // 过滤列表
                function filter_func(content_lis, content_ul, titel_name) {
                    try {
                        let filter_name = content_lis.filter(function (item) {
                            return item.querySelector('.span_name').innerText === input_value
                        })[0]
                        content_ul.innerHTML = ''
                        // 添加过滤后的数据
                        content_ul.appendChild(filter_name)
                    }
                    // 未搜索到
                    catch {
                        content_ul.innerHTML = ''
                        let h = document.createElement('h1')
                        h.innerHTML = '无记录'
                        h.classList.add('wujilu')
                        // 添加无记录信息
                        content_ul.appendChild(h)
                    }
                }
                // 搜索框是否有内容
                if (input_value) {
                    // 更新未学习列表
                    filter_func(weixuexi_lis, weixuexi_content, 'weixuexi')
                    // 更新仅录播列表
                    filter_func(jinlubo_lis, jinlubo_content, 'jinlubo')
                }
            }

            // 监听搜索框键盘事件
            search.addEventListener('keyup', function (event) {
                if (event.keyCode === 13) {
                    filter_function()
                }
            })
            // 监听搜索点击事件
            search_btn.addEventListener('click', filter_function)

            // 刷新按钮
            let reset = document.querySelector('.reset')
            reset.addEventListener('click', function () {
                weixuexi_content.innerHTML = ''
                jinlubo_content.innerHTML = ''
                
                weixuexi_items.forEach(element => {
                    weixuexi_content.appendChild(element)
                });
                jinlubo_items.forEach(element => {
                    jinlubo_content.appendChild(element)
                });
            })
            
        })
        })
}

